import getAssetsFile from '@/utils/pub-use';
import { Grid, Image } from 'antd-mobile';
import { FC } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';

const HeaderComponent: FC<{
  left?: React.ReactNode | string;
  title?: string | React.ReactNode;
  onClick?: () => void;
  right?: React.ReactNode | string;
  centerStyle?: React.CSSProperties;
  leftStyle?: React.CSSProperties;
  rightStyle?: React.CSSProperties;
}> = ({ title, onClick, right, centerStyle, left, leftStyle, rightStyle }) => {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const leftEvent = () => {
    onClick ? onClick() : navigate(-1);
  };
  console.log(centerStyle);
  return (
    <div className="title py-2">
      <Grid columns={3} gap={8}>
        <Grid.Item className="flex items-center">
          {left ? (
            typeof left == 'string' ? (
              t(left)
            ) : (
              left
            )
          ) : (
            <Image
              style={leftStyle}
              src={getAssetsFile('back.png')}
              width={18}
              onClick={leftEvent}
            />
          )}
        </Grid.Item>
        <Grid.Item
          className={`text-center text-xl font-semibold`}
          style={centerStyle}
        >
          {title ? (typeof title == 'string' ? t(title) : title) : ''}
        </Grid.Item>
        <Grid.Item style={rightStyle}>{right ? right : ''}</Grid.Item>
      </Grid>
    </div>
  );
};

export default HeaderComponent;
